<template>
  <div>
    <page-dialog
      :title="dialogInfo.title"
      v-model:visible="shows"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
    >
      <div class="layui-row">
        <el-form ref="tableForm" :model="tableInfo" style="width: 100%">
          <dialog-table
            :pager="false"
            :check-box="false"
            :tab-index="true"
            v-model:data="tableInfo.data"
            :field-list="tableInfo.fieldList"
            :handle="tableInfo.handle"
          >
            <template v-slot:col-code="scope">
              <el-form-item
                :prop="`data.${scope.$index}.code`"
                :rules="[
                  {
                    required: scope.$index >= 0,
                    message: '请选择项目类型',
                    trigger: 'change',
                  },
                ]"
              >
                <select-model
                  v-model.lazy="scope.row.code"
                  style="margintop: 18px"
                  :type-code="`asset_capital_source`"
                  :clearable="true"
                />
              </el-form-item>
            </template>
            <template v-slot:col-amount="scope">
              <el-form-item
                :prop="`data.${scope.$index}.amount`"
                :rules="
                  scope.$index >= 0
                    ? [
                        {
                          validator: $validate.positiveMoneyZeroAsset,
                          trigger: ['blur', 'change'],
                        },
                      ]
                    : []
                "
              >
                <el-input-number
                  v-model.lazy="scope.row.amount"
                  style="width: 100%; margintop: 18px"
                  clearable
                  controls-position="right"
                  :precision="
                    $store.state.permission.systemConfig.assets_price_precision
                  "
                  :min="0"
                  :max="999999999999999"
                />
              </el-form-item>
            </template>
          </dialog-table>
        </el-form>
      </div>
    </page-dialog>
  </div>
</template>
<script setup name="AssetCapitalSource">
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false,
  },

  data: {
    type: Array,
    default: function () {
      return []
    },
  },
})
const tableInfo = ref({
  data: props.data.length
    ? proxy.$fn.deepClone(props.data)
    : [{ code: '', amount: 0 }],
  fieldList: [
    {
      label: '项目类型',
      value: 'code',
      type: 'slot',
    },
    {
      label: '金额',
      value: 'amount',
      type: 'slot',
    },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [
      {
        label: '新增行',
        event: addSource,
        show: true,
      },
      {
        label: '删除',
        event: removeSource,
        popconfirmText: '删除后将改变数据,是否继续？',
        show: true,
        ifRender: ifRenderRemoveDept,
      },
    ],
  },
})
const addAssetAmortizationDeptInfo = ref({
  visible: false,
  index: '',
  query: {
    deptAuth: 'id',
    idNotIn: '',
  },
})
const dialogInfo = ref({
  title: '资金来源',
  btLoading: false,
  width: '60%',
  btList: [
    { label: '关闭', event: closeAmortization, show: true },
    {
      label: '保存',
      type: 'primary',
      event: saveAmortization,
      show: true,
    },
  ],
})
const shows = computed({
  get() {
    return props.showDialog
  },
  set(newValue) {
    emits('update:showDialog', newValue) // 更新父组件shows
  },
})
function closeAmortization() {
  //关闭资金来源
  tableInfo.value.data = []
  shows.value = false
}
function saveAmortization() {
  //保存资金来源
  proxy.$refs['tableForm'].validate((valid) => {
    if (valid) {
      let warning = false
      tableInfo.value.data.some((e, index, arr) => {
        if (arr.filter((e1) => e1.code == e.code).length > 1) {
          warning = true
        }
      })
      if (warning) {
        proxy.$message({
          showClose: true,
          message: '请选择不同的项目类型',
          type: 'warning',
          duration: 3500,
        })
        return
      }
      emits('callback', tableInfo.value.data)
      closeAmortization()
    }
  })
}
function addSource() {
  //添加资金来源
  tableInfo.value.data.push({
    code: '',
    amount: 0,
  })
}
function removeSource(row) {
  //删除资金来源
  tableInfo.value.data = tableInfo.value.data.filter((item) => item !== row)
  setTimeout(() => {
    proxy.$refs.tableForm.clearValidate()
  }, 30)
}
function ifRenderRemoveDept() {
  //资金来源列表是否显示删除
  if (tableInfo.value.data.length - 1) {
    return true
  } else {
    return false
  }
}
</script>
